<template>
    <div class="body1">
        <div class="no-print el-button-print">
            <el-button @click="addForm">添加页</el-button>
            <el-button @click="deleteForm">删除页</el-button>
            <el-button @click="exportPDF">导出为pdf</el-button>
        </div>
        <div class="body2" id="pdfDom" :class="{ 'pdf-export': isPdfExport }">
            <div v-for="(item, index) in form" :key="index" :class="{ 'page-break': index !== 0 }">
                <div class="title">
                    <div class="biaotididian">{{ agencyName }}</div>
                    <div class="biaoti">证据照片（图片）登记表</div>
                </div>
                <table class="tableStyle">
                    <colgroup>
                        <col width="15%">
                        <col width="35%">
                        <col width="15%">
                        <col width="35%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <td style="text-align: center">收集时间</td>
                            <td colspan="3">
                                <editable-textarea :text="form[index].data1" param-type="YYYY-MM-DD HH:mm"
                                    @send-to-parent="(data, type) => receiveFromChild(data, type, index)"></editable-textarea>
                            </td>
                        </tr>

                        <tr>
                            <td style="text-align: center">收集地点</td>
                            <td colspan="3">
                                <el-input v-model="item.text1" :resize="'none'" autosize class="areaInputStyle"
                                    type="textarea" maxlength="27"></el-input>
                            </td>
                        </tr>

                        <tr>
                            <td style="text-align: center">收集方式</td>
                            <td colspan="3" style="font-family: 仿宋,serif;font-size: 5mm">
                                <div>
                                    <input type="checkbox" v-model="item.a1" />现场拍摄
                                    <input type="checkbox" v-model="item.a2" />网络下载
                                    <input type="checkbox" v-model="item.a3" />举报人提供
                                    <input type="checkbox" v-model="item.a4" />媒体图片
                                    <input type="checkbox" v-model="item.a5" />其他部门移送
                                    <input type="checkbox" v-model="item.a6" />其它方式
                                    <input type="text" class="inputStyle" v-model="item.a13" maxlength="27"
                                        style="margin-left: 1mm;text-align: left;border-bottom: 1px solid black;width: 99%; font-family: 仿宋,serif;font-size: 5mm" />
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td style="text-align: center">收集人员姓名</td>
                            <td>
                                <el-input v-model="item.a7" :resize="'none'" autosize maxlength="22"
                                    class="areaInputStyle" type="textarea" ref="inputRef6">
                                </el-input>
                            </td>

                            <td style="text-align: center">收集人员身份</td>
                            <td>
                                <div><input type="checkbox" v-model="item.a8">行政执法人员</div>
                                <div>
                                    <input type="checkbox" v-model="item.a9">其他人员:
                                    <input type="text" class="inputStyle" v-model="item.a10" maxlength="11"
                                        style="margin-left: 1mm;text-align: left;border-bottom: 1px solid black;width: 98%; font-family: 仿宋,serif;font-size: 5mm" />
                                </div>
                            </td>
                        </tr>

                        <tr style="height: 290px;">
                            <td colspan="4">
                                <div style="display: flex; align-items: center; justify-content: center;  height: 270px;"
                                    class="image-container" @click="chooseImage1(index)">
                                    <img v-if="!isLoading1 && item.imageSrc1" :src="item.imageSrc1" alt="证据照片（图片）"
                                        style="max-height: 240px; max-width: 100%;">
                                    <input type="file" accept="image/*" style="display: none" ref="imageInput1"
                                        @change="handleFileChange1">
                                    <div v-if="!item.imageSrc1 || isLoading1" class="placeholder-image"
                                        @click="chooseImage1(index)"></div>
                                </div>
                                <div style="bottom: 5px;text-align: center">照片、图片粘贴（打印）处:</div>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="4" style="height: 30px;">证明内容: <input v-model="item.a11" class="areaInputStyle"
                                    type="text" style="width: 520px;" maxlength="27">
                            </td>
                        </tr>

                        <tr style="height: 290px;">
                            <td colspan="4">
                                <div style="display: flex; align-items: center; justify-content: center;  height: 270px;"
                                    class="image-container" @click="chooseImage2(index)">
                                    <img v-if="!isLoading2 && item.imageSrc2" :src="item.imageSrc2" alt="证据照片（图片）"
                                        style="max-height: 240px; max-width: 100%;">
                                    <input type="file" accept="image/*" style="display: none" ref="imageInput2"
                                        @change="handleFileChange2">
                                    <div v-if="!item.imageSrc2 || isLoading2" class="placeholder-image"
                                        @click="chooseImage2(index)"></div>
                                </div>
                                <div style="bottom: 5px;text-align: center">照片、图片粘贴（打印）处:</div>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="4" style="height: 30px;">证明内容: <input v-model="item.a12" class="areaInputStyle"
                                    type="text" style="width: 520px;" maxlength="27">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import EditableTextarea from "@/views/template/EditableTextarea";
import { agencyName, sealName } from "../../utils/publicName.js"


export default {
    components: {
        EditableTextarea
    },
    data() {
        return {
            resultImgurl: '',
            isLoading1: false,
            isLoading2: false,
            currentItem: {},
            form: [
                {
                    imageSrc1: '',
                    imageSrc2: '',
                    text1: '',
                    data1: '',
                    a1: '',
                    a2: '',
                    a3: '',
                    a4: '',
                    a5: '',
                    a6: '',
                    a7: '',
                    a8: '',
                    a9: '',
                    a10: '',
                    a11: '',
                    a12: '',
                    a13: '',
                },
            ],
            isPdfExport: false, // 控制打印样式
        };
    },
    created() {
        window.parent.getTemplateData((data) => {
            this.form = data;
        })
        window.postForm = () => {
            this.postForm();
        }
    },

    mounted() {
        window.parent.changeTemplateDow();
    },

    methods: {
        addForm() {
            this.form.push({
                imageSrc1: '',
                imageSrc2: '',
                text1: '',
                data1: '',
                a1: '',
                a2: '',
                a3: '',
                a4: '',
                a5: '',
                a6: '',
                a7: '',
                a8: '',
                a9: '',
                a10: '',
                a11: '',
                a12: '',
                a13: '',
            });
        },
        // 删除页
        deleteForm() {
            if (this.form.length > 1) {
                this.form.splice(this.form.length - 1, 1);
            }
        },
        // 导出为pdf
        exportPDF() {
            this.savePDF()
                .then((blob) => {
                    const blobUrl = URL.createObjectURL(blob);

                    // 先预览
                    const previewWindow = window.open(blobUrl, '_blank');

                    // 自动下载
                    const fileName = `证据照片（图片）登记表.pdf`;
                    const downloadLink = document.createElement('a');
                    downloadLink.href = blobUrl;
                    downloadLink.download = fileName;
                    document.body.appendChild(downloadLink);
                    downloadLink.click();
                    document.body.removeChild(downloadLink);

                    // 监听预览窗口关闭后释放内存
                    if (previewWindow) {
                        const timer = setInterval(() => {
                            if (previewWindow.closed) {
                                clearInterval(timer);
                                URL.revokeObjectURL(blobUrl);
                            }
                        }, 1000);
                    } else {
                        setTimeout(() => URL.revokeObjectURL(blobUrl), 10000); // 兜底释放
                    }
                })
                .catch(error => {
                    console.error('导出PDF出错:', error);
                    alert('导出失败，请重试或联系管理员');
                });
        },
        savePDF() {
            this.isPdfExport = true; // 激活PDF样式
            return new Promise((resolve, reject) => {
                this.$nextTick(() => {
                    import('html2pdf.js').then((module) => {
                        const html2pdf = module.default;

                        //获取所有需要替换的 el-input
                        const elInputs = document.querySelectorAll('.el-input__inner, .el-textarea__inner');

                        //存储原始元素和它们的父节点，方便后续恢复
                        const originalElements = [];

                        elInputs.forEach((input) => {
                            const div = document.createElement('div');
                            div.style.whiteSpace = 'pre-wrap'; // 保留换行
                            div.style.fontFamily = '仿宋';
                            div.style.fontSize = '5mm';
                            div.textContent = input.value; // 保留原内容（自动处理 \n 换行）
                            div.style.lineHeight = '1.3';

                            // 替换 el-input，并存储原始元素
                            originalElements.push({
                                parent: input.parentNode,
                                original: input,
                                replacement: div,
                            });
                            input.parentNode.replaceChild(div, input);
                        });

                        // 配置选项
                        const opt = {
                            margin: 0,
                            image: {
                                type: 'jpeg',
                                quality: 0.98
                            },
                            html2canvas: {
                                scale: 2,
                                logging: false,
                                useCORS: true
                            },
                            jsPDF: {
                                unit: 'mm',
                                format: 'a4',
                                orientation: 'portrait'
                            }
                        };

                        const element = document.getElementById('pdfDom');

                        // 生成PDF Blob对象
                        html2pdf()
                            .set(opt)
                            .from(element)
                            .toPdf()
                            .get('pdf')
                            .then((pdf) => {
                                const blob = pdf.output('blob');

                                resolve(blob); // 返回Blob对象
                            })
                            .catch((error) => {
                                reject(error);
                            })
                            .finally(() => {
                                this.isPdfExport = false; // 恢复原始样式
                                // 恢复原始input
                                originalElements.forEach(({ parent, original, replacement }) => {
                                    parent.replaceChild(original, replacement);
                                });
                            });
                    }).catch((error) => {
                        reject(error);
                        this.isPdfExport = false;
                        originalElements.forEach(({ parent, original, replacement }) => {
                            parent.replaceChild(original, replacement);
                        });
                    });
                });
            });
        },
        //父页面提交按钮将调用此方法，此方法将文书数据回传到父页面的请求方法中
        postForm() {
            this.savePDF()
                .then((blob) => {


                    // 创建FormData并添加文件
                    const formData = new FormData();
                    formData.append('file', blob, '证据照片（图片）登记表.pdf');

                    window.parent.postTemplateDate(this.form, formData);
                })
                .catch(error => {
                    console.error('整个保存PDF出错:', error);
                });
        },

        //选择日期时间
        receiveFromChild(data, type, index) {
            const TypeMap = {
                'YYYY-MM-DD HH:mm': 'data1',
            };
            if (TypeMap[type] && this.form[index]) {
                this.form[index][TypeMap[type]] = data;
            }
        },

        chooseImage1(index) {
            this.currentItem = this.form.at(index)
            this.$refs["imageInput1"][index].click();
        },

        async handleFileChange1(event) {
            try {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = () => {
                    this.currentItem.imageSrc1 = reader.result;
                };

                if (file) {

                    this.isLoading1 = true;
                    reader.readAsDataURL(file);
                    setTimeout(() => {
                        this.isLoading1 = false;
                    }, 2000);

                    const formData = new FormData();
                    // 添加 file 属性，并指定文件名
                    formData.append('file', file);

                    // 设置 Content-Type 头部为 multipart/form-data
                    const config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };

                    const response = await axios.post('/api/related-file/uploadSign', formData, config);
                    const { code, data, message } = response.data;
                    if (code === '200') {
                        if (data && data.url) {
                            // debugger;
                            this.resultImgurl = data.url;
                            this.resultImgname = data.name;
                        } else {
                            throw new Error('图片上传失败，请重试！');
                        }
                    } else {
                        throw new Error(message || '图片上传失败，请重试！');
                    }
                    const url = `api/file/download/${this.resultImgurl}`;
                    this.currentItem.imageSrc1 = url
                }
            } catch (err) {
                this.$emit('updateSignImg', '', this.signType);
            }
        },

        chooseImage2(index) {
            this.currentItem = this.form.at(index)
            this.$refs["imageInput2"][index].click();
        },

        // 选择图片
        async handleFileChange2(event) {
            try {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = () => {
                    this.currentItem.imageSrc2 = reader.result;
                };

                if (file) {

                    this.isLoading2 = true;
                    reader.readAsDataURL(file);
                    setTimeout(() => {
                        this.isLoading2 = false;
                    }, 2000);

                    const formData = new FormData();
                    // 添加 file 属性，并指定文件名
                    formData.append('file', file);

                    // 设置 Content-Type 头部为 multipart/form-data
                    const config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };

                    const response = await axios.post('/api/related-file/uploadSign', formData, config);
                    const { code, data, message } = response.data;
                    if (code === '200') {
                        if (data && data.url) {
                            this.resultImgurl = data.url;
                            this.resultImgname = data.name;
                        } else {
                            throw new Error('图片上传失败，请重试！');
                        }
                    } else {
                        throw new Error(message || '图片上传失败，请重试！');
                    }
                    const url = `api/file/download/${this.resultImgurl}`;
                    this.currentItem.imageSrc2 = url
                }
            } catch (err) {
                this.$emit('updateSignImg', '', this.signType);
            }
        },
    }
};
</script>

<style scoped>
:deep(.el-button-print .el-button) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    min-width: 100px;
    height: auto;
    padding: 8px 15px;
    background: #fff !important;
    color: #000 !important;
    border: none;
}

:deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0;
    color: black;
    padding: 0;
    font-family: "仿宋", serif;
    font-size: 5mm;
    overflow-y: hidden;
    line-height: 1.3;
}

:deep(.el-textarea-hidden .el-textarea__inner) {
    box-shadow: 0 0 0 0;
    color: black;
    padding: 0;
    font-family: "仿宋", serif;
    font-size: 5mm;
    overflow-y: hidden !important;
    resize: none !important;
    height: auto !important;
}

.input-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.inputStyleNoLine {
    border: none;
    outline: none;
    padding: 0px;
}

.typeSpan {
    cursor: pointer;
    font-size: 5mm;
}
</style>
